<script setup lang="ts">
import { computed, ref } from 'vue'
import { isDark, toggleDark } from '@/hooks/useDark'
import useAppStore from '@/stores/modules/app'
const checked = ref<boolean>(isDark.value)
const menuItems = computed(() => [
  { title: '💿 Mock 指南', route: 'mock' },
  { title: '📊 Echarts 演示', route: 'charts' },
  { title: 'unocssExample', route: 'unocss' },
  { title: '🍍 持久化 Pinia 状态', route: 'counter' },
  { title: '🙅 404页 演示', route: 'unknown' },
  { title: '🧡 KeepAlive 演示', route: 'keepalive' }
])

const appStore = useAppStore()
function toggle() {
  toggleDark()
  appStore.switchMode(isDark.value ? 'dark' : 'light')
}
</script>

<template>
  <div class="pt-16">
    <van-cell-group inset>
      <van-cell center title="主题色">
        <template #right-icon>
          <van-switch
            v-model="checked"
            size="20px"
            aria-label="on/off Dark Mode"
            @click="toggle()"
          />
        </template>
      </van-cell>
      <template v-for="item in menuItems" :key="item.route">
        <van-cell :title="item.title" :to="item.route" is-link />
      </template>
    </van-cell-group>
  </div>
</template>
